<template>
  <div>
    <a-modal v-model="visible" :title="modal_title" on-ok="handleOk">
      <template slot="footer">
        <a-button key="back" @click="handleCancel"> 返回 </a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="handleOk"
        >
          提交
        </a-button>
      </template>
      <a-form
        :form="form"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
        ref="forms"
      >
        <a-form-item label="题目类别">
          <a-input
            v-decorator="[
              'name',
              {
                rules: [
                  { required: true, message: '请输入题目类别' },
                  {
                    min: 1,
                    max: 8,
                    message: '长度需在1-8位之间',
                    trigger: 'blur',
                  },
                ],
              },
            ]"
            placeholder="请输入题目名称"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
      // 动态显示弹框标题
      modal_title: "",
      loading: false,
      // 存放发送请求的token
      pic_token: {},
      visible: false,
      // 存储学校对应的系部信息
      depthList: [],
      // 存储学校信息
      schoolList: [],
      // 判断是否是新增
      state_update: false,
      // 点击的ID
      Id: 0,
      departmentId: 0,
      schoolId: "",
    };
  },
  created() {
    this.pic_token.authorization = window.localStorage.getItem("authorization");
  },
  //   /admin/actions
  methods: {
    // 在模态加载完成后 对select 进行选择上的填充
    async init(state) {
      this.$emit("refreshDataList");
      //如果是修改操作
      if (state) {
        this.$nextTick(async () => {
          this.modal_title = "更新";
          this.visible = true;
          // 设置更新标志 让确认时 发送不同的请求
          this.state_update = true;
        });
      } else {
        this.visible = true;
        this.modal_title = "新增";
        this.state_update = false;
        // 新增操作
      }
    },
    // 模态的确认按钮触发
    async handleOk(e) {
      e.preventDefault();
      this.form.validateFields(async (err, values) => {
        // 如果表单验证通过的话
        if (!err) {
          this.loading = true;
          if (this.state_update == false) {
            //新增操作
            const { data: res } = await this.$http.post(
              "/admin/question/category",
              {
                name: values.name,
              }
            );
            if (res.code == 200) {
              this.common.notify("success", "新增成功");

              // this.$message.success("新增成功");
              this.$emit("refreshDataList");
              this.form.setFieldsValue({ name: "" });
              setTimeout(() => {
                this.visible = false;
                this.loading = false;
              }, 1000);
            } else {
              this.common.notify("warning", "操作异常");

              // this.$message.warning("操作异常");
              setTimeout(() => {
                this.loading = false;
              }, 1000);
            }
          } else {
            //更新操作
            this.state_update == false; // 初始化\
            const { data: res } = await this.$http.put(
              "/admin/question/category",
              {
                id: this.Id,
                name: values.name,
              }
            );
            if (res.code == 200) {
              this.common.notify("success", "修改成功");

              // this.$message.success("修改成功");
              this.$emit("refreshDataList");
              setTimeout(() => {
                this.visible = false;
                this.loading = false;
              }, 1000);
            } else {
              this.common.notify("warning", "修改失败,请重试");

              // this.$message.warning("修改失败,请重试");
              setTimeout(() => {
                this.loading = false;
              }, 1000);
            }
          }
        }
      });
    },
    handleCancel(e) {
      this.visible = false;

      this.$emit("refreshDataList");
    },
    // 数组去重
    async update(record) {
      this.Id = record.id;
      this.state_update = true;
      this.init(this.state_update);
      this.$nextTick(async () => {
        // 发送一个请求 让组件有足够的时间获取到 当前点击的用户信息 可有可无
        const { data: res2 } = await this.$http.get("/front/school/all");
        this.schoolList = res2.data;

        this.form.setFieldsValue({
          name: `${record.name}`,
        });
      });
    },
  },
};
</script>
<style  lang='less' scoped>
.name_part {
  display: flex;
  .name_label {
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    margin-right: 28px;
  }
}
.desc_part {
  display: flex;
  margin-top: 20px;

  .desc_label {
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    margin-right: 30px;
  }
}
.permission_part {
  display: flex;
  margin-top: 20px;
  .permission_label {
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    margin-right: 25px;
  }
}
// /deep/ .ant-input-affix-wrapper .ant-input {
//   width: 283px;
// }
/deep/ .ant-modal-body {
  text-align: center;
}
.name_label {
  margin-left: 50px;
}
</style>